<script setup lang="ts">
import {ref} from 'vue'
import router from "@/router";

let menus = ref([
  {"name": 'NavigatorOne', "path": 'One', "icon": 'Document'},
  {"name": 'NavigatorTwo', "path": 'Two', "icon": 'Menu'},
  {"name": 'NavigatorThree', "path": 'Three', "icon": 'Location'},
  {"name": 'NavigatorFour', "path": 'Four', "icon": 'Setting'}
])

const toLink = (path: string) => {
  router.push({
    path: path
  })
}

</script>

<template>
  <div class="ItemAside">
    <h3 class="mb-2">This is the menu</h3>
    <el-menu
        default-active="2"
        class="asideMenu"
    >
      <el-menu-item :index="item.path" v-for="item in menus">
        <component :is="item.icon" style="width: 2vw;margin-right:5px;color: white"/>
        <span @click="toLink(item.path)">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<style scoped lang="scss">
@import "ItemAside.scss";
</style>